<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>iscroll-测试</title>
    <!--<link href="css/reset.css" rel="stylesheet" type="text/css">-->
    <!--<link href="css/cm.css" rel="stylesheet" type="text/css">-->
</head>
<style type="text/css">
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    html {
        -ms-touch-action: none;
    }

    body,ul,li {
        padding: 0;
        margin: 0;
        border: 0;
    }

    body {
        font-size: 12px;
        font-family: ubuntu, helvetica, arial;
        overflow: hidden; /* this is important to prevent the whole page to bounce */
    }

    #header {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 45px;
        line-height: 45px;
        background: #CD235C;
        padding: 0;
        color: #eee;
        font-size: 20px;
        text-align: center;
        font-weight: bold;
    }

    #footer {
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 48px;
        background: #444;
        padding: 0;
        border-top: 1px solid #444;
    }

    #wrapper {
        position: absolute;
        z-index: 1;
        top: 45px;
        bottom: 48px;
        left: 0;
        width: 100%;
        background: #ccc;
        overflow: hidden;
        -webkit-transform:translate3d(0,0,0);
    }

    #scroller {
        position: absolute;
        z-index: 1;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        width: 100%;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
    }

    #scroller ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        text-align: left;
    }

    #scroller li {
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #fff;
        background-color: #fafafa;
        font-size: 14px;
    }
    #pullDown,#pullUp,.pulldown-tips{
        height:40px;
        line-height:40px;
        text-align:center;
    }
    .pulldown-tips{
        position:absolute;
        top:-40px;
        left:0;
        width:100%;
    }

</style>
<body onload="load()">
<div id="header">iScroll</div>
<div id="wrapper">
    <div id="scroller">
        <div id="pullDown" class=""><div class="pullDownLabel"></div></div>
        <div class="pulldown-tips">下拉刷新</div>
        <ul id="list">
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 5</li>
            <li>Pretty row 6</li>
            <li>Pretty row 7</li>
            <li>Pretty row 8</li>
            <li>Pretty row 9</li>
            <li>Pretty row 10</li>
            <li>Pretty row 11</li>
            <li>Pretty row 12</li>
            <li>Pretty row 13</li>
            <li>Pretty row 14</li>
            <li>Pretty row 15</li>
            <li>Pretty row 16</li>
            <li>Pretty row 17</li>
            <li>Pretty row 18</li>
            <li>Pretty row 19</li>
            <li>Pretty row 20</li>
            <li>Pretty row 21</li>
            <li>Pretty row 22</li>
            <li>Pretty row 23</li>
            <li>Pretty row 24</li>
            <li>Pretty row 25</li>
            <li>Pretty row 26</li>
            <li>Pretty row 27</li>
            <li>Pretty row 28</li>
            <li>Pretty row 29</li>
            <li>Pretty row 30</li>
        </ul>
        <div id="pullUp" class="">
            <div class="pullUpLabel">加载更多</div>
        </div>
    </div>
</div>

<div id="footer"></div>

</body>
</html>
<script src="/js/jquery.min.js"></script>
<script src="/js/iscroll-probe.js"></script>
<script type="text/javascript">

    function load () {
        var myScroll,
            pullDown = $("#pullDown"),
            pullUp = $("#pullUp"),
            pullDownLabel = $(".pullDownLabel"),
            pullUpLabel = $(".pullUpLabel"),
            container = $('#list'),
            loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新

        pullDown.hide();
        pullUp.hide();

        myScroll = new IScroll("#wrapper", {
            preventDefault:false,
            scrollbars: true,
            mouseWheel: false,
            interactiveScrollbars: true,
            shrinkScrollbars: 'scale',
            fadeScrollbars: true,
            scrollY:true,
            probeType: 2,
            bindToWrapper:true,
            vScrollbar: false
        });
        myScroll.on("scroll",function(){
            if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')){
                if(this.y > 40){//下拉刷新操作
                    $(".pulldown-tips").hide();
                    pullDown.addClass("refresh").show();
                    pullDownLabel.text("松手刷新数据");
                    loadingStep = 1;
                    myScroll.refresh();
                }else if(this.y < (this.maxScrollY - 14)){//上拉加载更多
                    pullUp.addClass("refresh").show();
                    pullUpLabel.text("正在载入");
                    loadingStep = 1;
                    pullUpAction();
                }
            }
        });
        myScroll.on("scrollEnd",function(){
            if(loadingStep == 1){
                if( pullDown.attr("class").match("refresh") ){//下拉刷新操作
                    pullDown.removeClass("refresh").addClass("loading");
                    pullDownLabel.text("正在刷新");
                    loadingStep = 2;
                    pullDownAction();
                }
            }
        });

        function pullDownAction(){
            setTimeout(function(){
                var li, i;
                for (i = 0,li = ""; i < 3; i++) {
                    li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";
                }
                container.prepend(li);
                pullDown.attr('class','').hide();
                myScroll.refresh();
                loadingStep = 0;
                $(".pulldown-tips").show();
            },1000);
        }
        function pullUpAction(){
            setTimeout(function(){
                var li, i;
                for (i = 0,li = ""; i < 3; i++) {
                    li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";
                }
                container.append(li);
                pullUp.attr('class','').hide();
                myScroll.refresh();
                loadingStep = 0;
            },1000);
        }

        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    }


</script>